<template>
	<el-dialog :visible.sync="visible" :modal-append-to-body="false" title="我的信息" class="demo-ruleForm">
		<el-form :model="model" :rules="rules" ref="modelForm" label-width="100px" @submit.native.prevent
			:inline="false">
			<el-form-item label="头像" prop="HeaderUrl">
				<uploadimg v-model="model.HeaderUrl"></uploadimg>
			</el-form-item>
			<el-form-item label="员工姓名" prop="SysEmployeeName">
				<el-input v-model="model.SysEmployeeName"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="SysEmployeePhone">
				<el-input v-model="model.SysEmployeePhone"></el-input>
			</el-form-item>
			<el-form-item label="最后登录时间">
				{{format(model.LastLoginDateTime)}}
			</el-form-item>
			<el-form-item label="登录帐号">
				{{model.UserCode}}/{{model.SysEmployeePhone}}
			</el-form-item>
			<el-form-item label="所属角色">
				{{model.RoleNames}}
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="save" :loading="loading">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "updateInfo",
		data() {
			return {
				visible: false,
				loading: false,
				//密码
				model: {
					SysEmployeeName: '',
					HeaderUrl: '',
					SysEmployeePhone: '',
					LastLoginDateTime: '',
					UserCode: "",
					RoleNames: ""
				},
				rules: {
					SysEmployeeName: [{
						required: true,
						message: '请输入员工姓名',
						trigger: 'blur'
					}],
					SysEmployeePhone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: function(rule, value, callback) {
								if (value == null || value == "") {
									callback(new Error('请输入手机号!'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					]
				},
				defaultPic: "/static/img/inventor-2.png"
			}
		},
		computed: {
			currentDefaultPic() {
				return location.origin + this.defaultPic;
			}
		},
		methods: {
			show() {
				window.updateInfo = this;
				common.tool.get("/api/System/MyInfo").then((data) => {
					this.model = data.Result;
					//默认显示头像
					if (!this.model.HeaderUrl) {
						this.model.HeaderUrl = this.currentDefaultPic;
					} else {
						this.model.HeaderUrl = common.tool.commonUrl(this.model.HeaderUrl);
					}
					this.visible = true;
				});
			},
			format(val, format) {
				return common.tool.format(val, format);
			},
			close() {
				this.visible = false;
			},
			save() {
				this.formValidate("modelForm", () => {
					var model = {
						SysEmployeeName: this.model.SysEmployeeName,
						SysEmployeePhone: this.model.SysEmployeePhone,
						HeaderUrl: this.model.HeaderUrl == this.currentDefaultPic ? "" : this.model
							.HeaderUrl
					};
					var post = common.tool.toKeyValue(model);
					this.loading = true;
					common.tool.post("/api/System/MyInfo", post).then((data) => {
						common.showToast(data.Message, "success");
						var user = this.$store.state.user;
						user.userName = data.Result.SysEmployeeName;
						user.userHeader = common.tool.commonUrl(data.Result.HeaderUrl);
						this.$store.dispatch("setUser", user);
						this.visible = false;
						this.loading = false;
					}).catch(() => {
						this.loading = false;
					});
				});
			}
		}
	}
</script>

<style>
</style>
